
<!--

//-->

<style>
.division {
	margin-top: 50px;
}
/* line 879, ../sass/main.scss */
.special_topic_detail {
	/* padding-bottom: 20px; */
	
}
/* line 882, ../sass/main.scss */
.special_topic_detail .s_t_d_img_container {
	position: relative;
}
/* line 887, ../sass/main.scss */
.special_topic_detail .s_t_d_img_container img {
	width: 100%;
}
/* line 892, ../sass/main.scss */
.special_topic_detail p {
	font-size: 1.125rem;
	line-height: 1.625rem;
	color: #999999;
}

<!--
--> /* line 933, ../sass/main.scss */
.indicator {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 34px;
	height: 34px;
	cursor: pointer;
}
/* line 942, ../sass/main.scss */
.indicator .indicator_s {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	background: url("app/promotions/pointer_small.png") center/contain
		no-repeat;
	-webkit-animation: twinkle 1s linear infinite;
	animation: twinkle 1s linear infinite;
}
/* line 954, ../sass/main.scss */
.indicator .indicator_b {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	background: url("app/promotions/pointer_big.png") center/contain
		no-repeat;
	-webkit-animation: twinkle 1s linear .5s infinite;
	animation: twinkle 1s linear .5s infinite;
}
/* line 966, ../sass/main.scss */
.indicator .indicator_hover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	display: none;
	background: url("app/promotions/pointer_hover.png") center/contain
		no-repeat;
}
/* line 977, ../sass/main.scss */
.indicator .show_detail {
	display: none;
	position: absolute;
	top: -92px;
	left: 50px;
	padding: 10px;
	width: 180px;
	height: 220px;
	background: #fff;
	box-shadow: 0px 0px 3px 1px #999999;
}
/* line 988, ../sass/main.scss */
.indicator .show_detail img {
	margin-bottom: 10px;
	border: 1px solid #dddddd;
	width: 160px;
	height: 160px;
}
/* line 995, ../sass/main.scss */
.indicator .show_detail p {
	font-size: 12px;
	line-height: 16px;
	color: #000;
	font-weight: bold;
}
/* line 1003, ../sass/main.scss */
.indicator .show_detail.show {
	display: block;
}

/* line 1011, ../sass/main.scss */
.indicator:hover .indicator_s, .indicator:hover .indicator_b {
	display: none;
}
/* line 1015, ../sass/main.scss */
.indicator:hover .indicator_hover {
	display: block;
}
/* line 1019, ../sass/main.scss */
.indicator:hover .show_detail {
	display: block;
}

/* line 1024, ../sass/main.scss */
.triangle-left {
	position: absolute;
	top: 102px;
	left: -10px;
	width: 0;
	height: 0;
	z-index: 16;
	border-top: 6px solid transparent;
	border-right: 10px solid #fff;
	border-bottom: 6px solid transparent;
}

/* line 1036, ../sass/main.scss */
.triangle-left—bg {
	position: absolute;
	top: 102px;
	left: -11px;
	width: 0;
	height: 0;
	z-index: 15;
	border-top: 7px solid transparent;
	border-right: 11px solid #999999;
	border-bottom: 7px solid transparent;
}
</style>
<div ng-controller="promotiontopiccontent">
	<section class="content-header">
		<h1>
			{{title}}<small></small>
		</h1>
	</section>
	<section class="content">
		<div class="box box-default">
			<div class="col-md-12">
				<div class="box-body">
					<alertdanger></alertdanger>
					<alertsuccess></alertsuccess>
					<form role="form">
						<div class="box-body">

							<div class="form-group">
								<label>简介</label>
								<textarea ng-model="des" class="form-control" rows="8"
									placeholder="请输入简介"></textarea>
							</div>
							<div>
								<div class="box box-success">
									<div class="box-header with-border">
										<h3 class="box-title">搜索货物</h3>
									</div>
									<div class="box-body">
										<div class="form-group" ng-init="findallgoodstype();">
											<label>商品类型</label> <select ng-change="goodstypechange();"
												ng-model="selectedgoodstype"
												ng-options="gs.name for gs in goodstypeselect track by $index"
												class="form-control select2" style="width: 100%;">
												<option ng－value="-1">--请选择--</option>
											</select>
										</div>
										<div class="form-group">
											<label>货号</label> <input maxlength="20" ng-model="psn"
												class="form-control" type="text" placeholder="请输入货号进行搜索">
										</div>
										<div class="form-group" ng-init="findNavAll();">
											<label>一级分类</label> <select ng-change="navchange();"
												ng-model="selectednav"
												ng-options="gs.name for gs in navselect"
												class="form-control select2" style="width: 100%;">
												<option ng－value="-1">--请选择--</option>
											</select>
										</div>
										<div ng-show="ltypecategoryshow" class="form-group">
											<label>二级分类</label> <select ng-change="ltypechange();"
												ng-model="selectedltype"
												ng-options="gs.name for gs in ltypeselect"
												class="form-control select2" style="width: 100%;">
												<option ng－value="-1">--请选择--</option>
											</select>
										</div>
										<div ng-show="stypecategoryshow" class="form-group">
											<label>三级分类</label> <select ng-model="selectedstype"
												ng-options="gs.name for gs in stypeselect"
												class="form-control select2" style="width: 100%;">
												<option ng－value="-1">--请选择--</option>
											</select>
										</div>
										<div class="form-group">
											<button class="btn btn-default btn-block btn-sm"
												ng-click="filterSearchProduct();">搜索货物</button>
										</div>
									</div>
								</div>
								<div class="box box-success">
									<div class="box-header with-border">
										<h3 class="box-title">货物搜索结果列表</h3>
									</div>
									<div class="box-body table-responsive no-padding">
										<table class="table table-hover">
											<tr>
												<th>图片</th>
												<th>货物名称</th>
												<th>库存</th>
												<th>所属商品类型</th>
												<th>所属品牌</th>
												<th>成本价格</th>
												<th>会员价格</th>
												<th>市场价格</th>
												<th>销售价格</th>
												<th>操作</th>
											</tr>
											<tr ng-repeat="at in searchresult">
												<td><img class="direct-chat-img"
													src="{{basepath}}{{at.mainimg}}" alt="img" /></td>
												<td>{{at.productname}}</td>
												<td>{{at.stock}}</td>
												<td>{{at.goodstypename}}</td>
												<td>{{at.brandname}}</td>
												<td>{{at.cost}}</td>
												<td>{{at.memberprice}}</td>
												<td>{{at.price}}</td>
												<td>{{at.saleprice}}</td>
												<td><button
														ng-click="pushToSelectedProducts($index,at)"
														class=".btn-xs">选定</button></td>
											</tr>
										</table>
									</div>
								</div>
							</div>

							<div class="form-group">
								<label>第一张图片上传</label>
								<div ngf-drop ngf-select ng-model="onefiles" class="drop-box"
									ngf-drag-over-class="'dragover'" ngf-multiple="true"
									ngf-allow-dir="true" accept="image/*" ngf-pattern="'image/*'">
									<button class="btn btn-default btn-block btn-sm">选择文件</button>
									<div ngf-no-file-drop>File Drag/Drop is not supported for
										this browser</div>
								</div>
								<div class='box-body'>
									<div class="progress progress-sm active">
										<div
											class="progress-bar progress-bar-success progress-bar-striped"
											role="progressbar" aria-valuenow="0" aria-valuemin="0"
											aria-valuemax="100" style="width: {{onefilesprogress">
											<span class="sr-only">20% Complete</span>
										</div>
									</div>
									<div ng-repeat="img in onefilesallupimgs">
										<div ng-if="img.isCloudImg">
											<div>
												<button ng-click="onefilesremove($index)" type="button"
													class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
												<div class="special_topic_detail">
													<div class="s_t_d_img_container drag_container"
														style="width: 800px; height: 480px;">

														<div class="indicator draggable" style="top: 0%; left: 0%"
															ng-repeat="at in selectedproducts track by $index">
															<div class="indicator_s"></div>
															<div class="indicator_b"></div>
															<div class="indicator_hover"></div>

															<div class="show_detail show">
																<img src="{{at.mainimg}}">
																<p>{{at.productname}}{{at.memberprice|currency:"¥"}}</p>

																<div class="triangle-left"></div>
																<div class="triangle-left—bg"></div>
																<button type="button" class="btn btn-primary"
																	ng-click="savelocation($index);">保存坐标</button>
															</div>

															<script type="text/javascript">
											var initDraggable=function(){
												var $draggable = $('.draggable').draggabilly({
										            containment: '.s_t_d_img_container',
										        }); 

										        var drag_container_width = $('.drag_container').width();
										        var drag_container_height = $('.drag_container').height();
//										        dragEnd
										        $draggable.on('dragMove', function(){
										            var draggie = $(this).data('draggabilly');
										            var width = drag_container_width;
										            var height = drag_container_height;
										            var width_percent = ( (draggie.position.x + 17) / (width + 17) ) *100 + '%';
										            var height_percent = ( (draggie.position.y + 17) / (height + 17 ) ) * 100 + '%';
										            $('#drag_width_p').val(width_percent);
										            $('#drag_height_p').val(height_percent);
										            $('.drag_target').css({
										                'top' : height_percent,
										                'left' : width_percent
										            });
										        });
												}
											 initDraggable();
											</script>

														</div>
														<img ng-src="{{img.normalfilepath}}">
													</div>
												</div>


												<div class="form-group">
													<label>当前拖拽元素的宽度百分比</label> <input type="text"
														id="drag_width_p" name="" value=""> <label>当前拖拽元素的高度百分比</label>
													<input type="text" id="drag_height_p" name="" value="">
												</div>
												<div class="special_topic_detail">
													<div class="s_t_d_img_container">
														<div class="indicator drag_target"
															style="top: 0%; left: 0%"
															ng-repeat="at in selectedproducts2 track by $index">
															<div class="indicator_s"></div>
															<div class="indicator_b"></div>
															<div class="indicator_hover"></div>
															<div class="show_detail">
																<img src="{{at.mainimg}}">
																<p>{{at.productname}}{{at.memberprice|currency:"¥"}}</p>
																<div class="triangle-left"></div>
																<div class="triangle-left—bg"></div>
															</div>
														</div>

														<img ng-src="{{img.normalfilepath}}">
													</div>
												</div>



											</div>
										</div>
									</div>
								</div>

								<div class="col-md-3" ng-repeat="at in contentinfo">
									<label>已保存内容</label>
									<div class="form-group"></div>
									<div>
										<img src="{{at.img}}" style="width: 200px; height: 200px;">
										<p>{{at.productname}}{{at.memberprice|currency:"¥"}}</p>
										<p>宽度(%):{{at.locationw}}</p>
										<p>高度(%):{{at.locationh}}</p>
									</div>
								</div>



							</div>
						</div>

						<div class="box-footer">
							<button ng-show="savebtn.show" type="button"
								class="btn btn-primary" ng-click="save();">保存</button>
							<button ng-show="updatebtn.show" type="button"
								class="btn btn-primary" ng-click="update();">更新</button>
						</div>
					</form>
				</div>
			</div>
			<div class="box-footer"></div>
		</div>
	</section>


</div>

<script>
	$(function(){
		$(".select2").select2();
	});
</script>